<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="template.xhtml">
            <ui:define name="tituloJanela">
                #{msgs.logo}
            </ui:define>
            <ui:define name="conteudo">
                <div id="content">                                    
                    <h:form>                                    
                        <h:panelGroup rendered="#{empty jogoBean.buscaPrecos(menor)}">
                            <p>#{msgs.nothing}!</p>
                        </h:panelGroup>

                        <div id="botoesordem">
                            <h:commandButton value="#{msgs.up}" action="#{jogoBean.trocaOrdem('maior')}" disabled="#{jogoBean.ativarDec()}"/> 
                            <h:commandButton value="#{msgs.down}" action="#{jogoBean.trocaOrdem('menor')}" disabled="#{jogoBean.ativarCres()}"/>
                        </div>
                        <div class="clearfix"></div>
                        <ul id="jogoul">
                            <ui:repeat value="#{jogoBean.buscaPrecos(jogoBean.ordem)}" var="valor"> 
                                <li class="jogoli">
                                    <h:panelGroup rendered="#{empty valor.capa}">
                                        <h:graphicImage style="max-width: 20%;float: left;margin-right:15px" value="css/images/default.png"/>                                   
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{not empty valor.capa}">
                                        <h:graphicImage style="max-width: 20%;float: left;margin-right:15px" value="#{valor.capa}"/>                                   
                                    </h:panelGroup>
                                    <div class='atributos'>#{msgs.name}: <em><h:outputText value="#{valor.nome}"/></em> 
                                        <span class="carrinho"><h:commandLink action="#{carrinhoBean.addJogoCarrinho(valor.idjogo)}"><h:graphicImage value="css/images/cart.png" style="height:16px"/> #{msgs.addcart}!</h:commandLink></span>
                                    </div> 
                                    <div class='atributos'>#{msgs.type}: <em><h:outputText value="#{valor.tipo}"/></em> </div>  
                                    <div class='atributos'>#{msgs.platform}: <em><h:outputText value="#{valor.plataforma}"/></em> </div> 
                                    <div class='atributos'>#{msgs.realease}: <em><h:outputText value="#{valor.lancamento}"/></em> </div>  
                                    <div class='atributos'>#{msgs.stars}: <em><h:graphicImage value="#{valor.blabla(valor.stars)}" style="height: 15px;"/></em></div>  
                                    <div class='atributos'>#{msgs.price}: <em><h:outputText value="#{valor.preco}"/></em></div> 
                                    <div class='atributos'>#{msgs.description}: <em><h:outputText value="#{valor.descricao}"/> </em></div>          
                                </li>                                                                     
                            </ui:repeat>
                        </ul>
                    </h:form>                               
                </div>
            </ui:define>
        </ui:composition>

    </h:body>
</html>
